<script>
import { mapGetters, mapMutations } from 'vuex';
import * as helps from '@/utils/helps';
import BaseModule from '../base/BaseModule';
import App from '../app';
import geoServices from '../config/geo-services';

/*
 * 图层管理模块
 */
export default {
  name: 'LayersModule',
  title: '图层管理',
  icon: 'checkmark',
  position: 'left',
  order: 0,
  visible: true,
  mixins: [BaseModule],
  data() {
    return {
      //是否处于编辑模式
      editable: false,
      //模态框打开状态
      modalOpened: false,
      //查询关键字
      layerKeyword: '',
      //表格列
      tableColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '服务名称',
          key: 'name',
        },
        {
          title: '类型',
          key: 'serviceType',
        },
        {
          title: '空间参考',
          key: 'crs',
        },
      ],
      //表格数据
      tableData: [],
      //选择的图层
      selectedLayers: [],
      //图层数据
      layerData: [],
    };
  },
  computed: {
    ...mapGetters(['ogcLayers', 'controls', 'currentId']),
  },
  mounted() {
    //初始化Layers
    this.layerData = App.options.data;
    this.editable = App.options.mode == 'edit';
    let addWmslayers = {};
    this.layerData.forEach(p => {
      p.services[0].options = { visible: p.visible };
      addWmslayers[p.name] = p.services;
    });
    this.$nextTick(() => {
      this.$store.commit('SET_MAP_SERVICELIST', addWmslayers);
      // this.addMapLayers(addWmslayers);
    });
  },
  destroyed() {
    // let layerIds = this.ogcLayers.map(p => p.options.title);
    // this.removeMapLayers(layerIds);
  },
  methods: {
    ...mapMutations({
      // addMapLayers: 'SET_MAP_SERVICELIST',
      removeMapLayers: 'SET_MAP_GOCLAYER_DELETE',
      updateAppOptions: 'UPDATE_CHART_CONFIG',
    }),
    //查询地图服务
    async queryLayerService() {
      let services = helps.deepCopy(geoServices);
      let layerIds = this.layerData.map(p => p.name);
      services = services.filter(p => layerIds.indexOf(p.name) < 0); //排除已选的服务
      if (this.layerKeyword) {
        services = services.filter(
          p => p.name.toLowerCase().indexOf(this.layerKeyword.toLowerCase()) >= 0
        );
      }
      this.tableData = services;
    },
    //选择地图服务
    openLayerModal() {
      this.queryLayerService();
      this.modalOpened = true;
    },
    //设置选中图层
    setSelectedLayers(selection) {
      this.selectedLayers = selection;
    },
    //增加选中图层
    addLayers() {
      let addWmslayers = {};
      this.selectedLayers.forEach(layers => {
        const url = new URL(layers.wms);
        const layersName = url.searchParams.get('layers');
        let layerInfo = (addWmslayers[layersName] = []);
        layerInfo.push({
          servicestype: 12,
          servicesurl: layers.wms,
          title: layersName,
        });
        layerInfo.push({
          servicestype: 6,
          servicesurl: layers.wfs,
          title: layersName,
        });
        this.layerData.push({
          name: layersName,
          visible: true,
          order: 1,
          services: layerInfo,
        });
      });
      this.$store.commit('SET_MAP_SERVICELIST', addWmslayers);
      // this.addMapLayers(addWmslayers);
      this.updateLayerData();
    },
    //放缩到图层
    zoomToLayer(layerId) {
      let layer = this.ogcLayers.find(p => p.options.title == layerId);
      App.getMap().fitBounds(layer.options.saveBbox);
    },
    //设置图层是否可见
    setlayerVisible(layerItem) {
      let layer = this.ogcLayers.find(p => p.options.title == layerItem.name);
      layer.setVisible(layerItem.visible);
      this.updateLayerData();
    },
    //查看图层要素
    viewLayerFeatures(layerItem) {
      let wfsUri = layerItem.services[1].servicesurl;
      this.addBottomModuleEx({
        type: 'FeatureListModule',
        id: 'featureDataList',
        title: '图层要素',
        options: { service: wfsUri },
      });
    },
    //删除图层
    delateLayer(layerId) {
      this.removeMapLayers([layerId]);
      helps.removeArrayItemEx(this.layerData, item => item.name == layerId);
      this.updateLayerData();
    },
    //更新应用程序配置
    updateLayerData() {
      let currentControl = this.controls[this.currentId];
      currentControl.options.data = this.layerData;
      this.updateAppOptions({ data: { [this.currentId]: currentControl } });
    },
  },
};
</script>

<template>
  <div class="layers-module-wrapper">
    <div
      v-if="editable"
      class="dash-button"
      @click="openLayerModal">
      <Icon type="plus-round" />
      添加数据
    </div>
    <div class="layer-list-wrapper">
      <div
        v-for="item in layerData"
        :key="item.name"
        class="layer-item">
        <div class="layer-item-title">
          <Checkbox
            v-model="item.visible"
            @on-change="setlayerVisible(item)"></Checkbox>
          <span>{{ item.name }}</span>
        </div>
        <div class="layer-item-action">
          <Icon
            type="search"
            title="查看要素"
            @click.native.stop="viewLayerFeatures(item)" />
          <Icon
            type="arrow-right-c"
            title="放缩到图层"
            @click.native.stop="zoomToLayer(item.name)" />
          <Icon
            v-if="editable"
            type="trash-b"
            title="删除图层"
            @click.native.stop="delateLayer(item.name)" />
        </div>
      </div>
    </div>
    <Modal
      v-model="modalOpened"
      :mask-closable="false"
      width="600"
      class="layer-module-modal"
      title="选择地图图层"
      @on-ok="addLayers">
      <div>
        <div class="layer-search-panel">
          <Input
            v-model="layerKeyword"
            placeholder="输入服务名称..."></Input>
          <Button
            type="primary"
            @click="queryLayerService">查询</Button>
        </div>
        <Table
          :columns="tableColumns"
          :data="tableData"
          height="300"
          size="small"
          stripe
          border
          @on-selection-change="setSelectedLayers">
        </Table>
      </div>
    </Modal>
  </div>
</template>

<style lang="less" scoped>
.layers-module-wrapper {
  .dash-button {
    height: 40px;
    border: 1px dashed #5d5d5d;
    border-radius: 2px;
    line-height: 37px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    &:hover {
      background-color: #303030;
    }
  }

  .layer-list-wrapper {
    margin-top: 15px;
    .layer-item {
      margin-top: 12px;
      background-color: #303030;
      border-radius: 3px;
      list-style: none;
      padding: 11px 8px;
      height: 44px;
      display: flex;
      color: #ffffff;
    }
    .layer-item-title {
      flex: 1;
      padding-left: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .k-checkbox {
        left: -2px;
      }
    }
    .layer-item-action {
      flex: 1;
      text-align: right;
      color: #dddddd;
      .k-icon {
        margin: 0 4px;
        cursor: pointer;
        font-size: 16px;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}

.layer-search-panel {
  margin-bottom: 15px;
  .k-input-wrapper {
    margin-right: 5px;
    width: 250px;
  }
}
</style>
